<template>
	<view>
		<view class="wd-p-30r wd-bg-fff u-border-bottom">
			<view class="wd-flex wd-justify-between wd-items-center">
				<view class="wd-flex-1 wd-lines-1 wd-truncate wd-font-900">
					<text>苹果 iPhone XS Max</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="">
					<u-button type="error" size="mini" shape="circle">
						<view class="wd-px-20r wd-text-28r">设计完毕</view>
					</u-button>
					<u-button type="success" size="mini" shape="circle">
						<view class="wd-px-20r wd-text-28r">选择型号</view>
					</u-button>
				</view>
			</view>
		</view>
		<view class=" ">
			<view class="">
				<view class="">
					<view class="">
						<u-grid :col="4" :border="false">
							<u-grid-item @click="onAddImage">
								<view class="">
									<u-icon name="custom-icon-qiehuan2" custom-prefix="custom-icon"></u-icon>
								</view>
								<view class="">
									<text class="">绘图</text>
								</view>
							</u-grid-item>
							<u-grid-item @click="onAddText">
								<view class="">
									<u-icon name="custom-icon-qiehuan2" custom-prefix="custom-icon"></u-icon>
								</view>
								<view class="">
									<text class="">文字</text>
								</view>
							</u-grid-item>
							<u-grid-item>
								<view class="">
									<u-icon name="custom-icon-qiehuan2" custom-prefix="custom-icon"></u-icon>
								</view>
								<view class="">
									<text class="">贴纸</text>
								</view>
							</u-grid-item>
							<u-grid-item>
								<view class="">
									<u-icon name="custom-icon-qiehuan2" custom-prefix="custom-icon"></u-icon>
								</view>
								<view class="">
									<text class="">图库</text>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fabirc from 'fabric'
	export default {
		name: "phone-case-operate",
		props: {
			canvas: {
				type: Object,
			},
		},
		data() {
			return {

			};
		},
		mounted() {
			this.init();
		},
		watch: {

		},
		methods: {
			init() {

			},
			//添加绘图
			onAddImage() {
				vk.showLoading('加载中...');
				let image1 = "https://mp-f06d4193-e086-4d74-bf0a-f2d52209893e.cdn.bspapp.com/test.png"
				let image2 = "https://mp-f06d4193-e086-4d74-bf0a-f2d52209893e.cdn.bspapp.com/123.png"
				uni.downloadFile({
					url: image1,
					success: (res) => {
						vk.myfn.blobToBase64(res.tempFilePath).then(base64 => {
							fabric.Image.fromURL(base64, img => {
								img.set({
									top: (this.canvas.height - img.height) / 2,
									left: (this.canvas.width - img.width) / 2,
								})
								this.canvas.add(img);
							});
						})
					},
					complete: () => {
						vk.hideLoading();
					}
				})
			},
			//添加文字	
			onAddText() {
				var text = new fabric.IText(
					'《天净沙·秋思》\n枯藤老树昏鸦，\n小桥流水人家，\n古道西风瘦马。\n夕阳西下，\n断肠人在天涯。', {
						width: 300,
						fontSize: 14,
						fontFamily: 'Comic Sans',
						left: 50,
						top: 100,
						splitByGrapheme: true, // 自动换行
					}
				);
				this.canvas.add(text);
			}
		},
	}
</script>

<style>
</style>